<head>
<meta http-equiv='content-type' content='text/html; charset=utf8' />
<title>jsGoo tests</title><link rel='stylesheet' href='main.css' type='text/css' />
<script type='text/javascript' src='jsgoo.js'></script>
<script type='text/javascript'>

function gen() {
    var d = DATA;
    _.$into('tabs', _.list(_c.injectL(d.tabs, {
                    cssclass: function(o, i){ 
                        return "/"+d.curpath==o.path?'tab1':'tab2'; 
                    }
                }), d.tabtpl, 'ul id="tabnav"')); 
}

var DATA = {
    tabs: [
        { path: "/", name: "Home" },
        { path: "/emails", name: "Emails" },
        { path: "/contacts", name: "Contacts" },
        { path: "/notes", name: "Notes" },
        { path: "/settigns", name: "Settings" }
    ],
    tabtpl: '<li class="{cssclass}"><a href="{path}">{name}</a></li>',
    curpath: 'emails'
}
</script>
<body>
<div><a href="index.html">index</a> <a href="#" onclick="gen(); return false;">generate</a> 
<em></em></div>
<div id="header"><div id="title">Some header</div><div id="tabs"></div></div>

<p>We use <em>injectL</em> function to add class to tabs data that defines currently 
selected tab. "Email" in this test.</p> 
</body>
</html>